import json
import pandas as pd
from dash import html
from .. import navi
def ItemDiv(biliItem):
    return html.Div([
        # html.Img(src=biliItem['pic']+'@378w_378h_1c_!web-search-common-cover.webp',className='ItemImg',style={'width':'30%','height':'30%'}),
        html.Div([
            html.H4(biliItem['title'],className='ItemTitle'),
            html.P(biliItem['description'],className='ItemDesc'),
            html.P(str(biliItem['play'])+'人播放               '+str(biliItem['favorites'])+'人收藏',className='ItemPlay'),
            ## 添加立即观看链接跳转
            html.A('立即观看',href=biliItem['url'],className='ItemLink',style={'text-decoration':'none','width':'100%', 'text-align':'left'},target='_blank'),
        ],className='ItemTextDiv',style={'display':'flex','flex-grow': 1,'flex-direction':'column','align-items':'left','margin':'0px','width':'70%'}),
    ],className='ItemDiv',style={'display':'flex','flex-grow': 1,'flex-direction':'row','align-items':'center','margin':'0px','width':'90%'})


def VideoBili():
    bilidata = json.load(open('src/data/bilidata.json', 'r', encoding='utf-8'))
    box = html.Div([])
    for item in bilidata:
        box.children.append(ItemDiv(item))
    return box

def Videos():
    return html.Div([
        navi.navigator(),
        html.Div([
        VideoBili()
        ],className='GardenDiv',style={'width':'100%'}),
        ## 添加 “加载更多”的按钮
        # html.Button('加载更多',id='loadMoreButton',className='btn btn-primary',style={'width':'100%','margin':'20px'})
    ],style={'margin':'20px'})